<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
    修饰符作用：用来和事件连用，决定事件触发条件或者是阻止事件的触发机制。

    常用的事件修饰符：
    .stop：用来阻止事件冒泡。
        事件冒泡：子标签的事件和父标签相同时，如果触发了子标签的事件，父标签的事件会同时触发。
    .prevent：用来阻止标签的默认行为，改变为自己定义的行为
    .self：只触发自己标签的上特定动作的事件，不监听事件冒泡。
    .once：让指定事件只触发一次。

    <!--self事件修饰符, 只出发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--stop事件修饰符, 用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    </div>
    <hr>
    <!--prevent事件修饰符, 用来阻止标签的默认行为-->
    <!--a标签的默认行为就是跳转, prevent阻止了跳转-->
    <!--.once: 用来只执行一次特定的事件-->
    <a href="http://hlzy.xyz/" @click.prevent.once="aClick">所愿皆所得, 所行化坦途</a>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            // 事件冒泡, 点击了按钮, 然后会触发父元素(div)的事件
            // 用stop事件修饰符, 可以阻止事件冒泡
            btnClick() {
                alert("按钮被点击了。");
            },
            divClick() {
                alert("div被点击了。");
            },
            aClick() {
                alert("a标签被点击了。");
            },
            btnClick1() {
                alert("btn1被点击了。");
            }
        }
    });
</script>
</body>
</html>